<template>
  <div style="height: 200px;" class="flex-center">
    <div style="width: 800px">
      <el-input>
        <template #append>
          <el-button :icon="Search">搜索</el-button>
        </template>
      </el-input>
    </div>
  </div>
  <div class="flex-center">
    <el-card class="person-box">
      <div>
        <el-avatar :size="100" :src="postUserInfo?.avatar" shape="square"></el-avatar>
        <el-icon v-if="postUserInfo?.sex === 1" color="red">
          <Female/>
        </el-icon>
        <el-icon v-else color="#0070e8">
          <Male/>
        </el-icon>
        <el-divider direction="vertical"/>
        <el-text>{{ postUserInfo?.userName }}</el-text>
        <el-divider direction="vertical"/>
        <el-text> 发帖：{{ postUserInfo?.postCount }}</el-text>
      </div>
      <hr style="border: 2px solid #0070e8">
      <div>
        <h6 style="color: #0070e8">关注的吧</h6>
        <el-row>
          <el-col v-for="item in postUserInfo?.followBards" :key="item.bardId" :span="4">
            <el-button @click="goBardDetail(item.bardId)">{{ item.bardName }}</el-button>
          </el-col>
        </el-row>
      </div>
      <br>
      <div>
        <h6 style="color: #0070e8">帖子</h6>
        <el-row v-for="(item,index) in postUserInfo?.publishPosts" :key="item.postId">
          <el-col :span="20">
            <el-link @click="goPostDetail(item.postId)">
              {{ item.title }}
            </el-link>
            <div>
              <el-text size="small">
                {{ item.content }}
              </el-text>
            </div>
          </el-col>
          <el-col :span="4">
            {{dateFormat(item.createdTime)}}
          </el-col>
          <el-divider v-if="index !== postUserInfo?.publishPosts.length - 1"></el-divider>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
import {Search, Female, Male} from '@element-plus/icons-vue'
import {useRoute, useRouter} from "vue-router";
import type {PostUserInfoVO} from "@/api/social/posts/type";
import {reqGetPostUserById} from "@/api/social/posts";
import {dateFormat} from '@/utils/timeutil'

const route = useRoute();
const router=useRouter()
let postUserInfo = ref<PostUserInfoVO>()

let getPostUserByUserId = () => {
  reqGetPostUserById(route.query.userId as string).then(res => {
    postUserInfo.value = res.data
  })
}
let goPostDetail=(postId:string)=>{
  router.push({
    path:'/social/post-bard/post/detail',
    query:{
      postId
    }
  })
}
let goBardDetail=(bardId:string)=>{
  router.push({
    path:'/social/post-bard/bard/detail',
    query:{
      bardId
    }
  })
}
onMounted(() => {
  getPostUserByUserId()
})
</script>

<style scoped>
.person-box {
  width: 1000px;
}
</style>
